﻿<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1"/>
    <title>LOL</title>
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <link rel="stylesheet" href="css/index.css"/>
</head>
<body>
    <canvas id="c1"></canvas>
    <nav class="nav navbar-default navbar-fixed-top navbar-inverse">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                        data-target="#navMain" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a href="#" class="navbar-brand">
                    <img src="images/logo.png" alt="">
                </a>
            </div>

            <div class="collapse navbar-collapse" id="navMain">
                <ul class="nav navbar-nav">
                    <li><a href="#">首页</a></li>
                    <li><a href="#">用户互动</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" >英雄列表
                            <span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu">
                            <li><a href="#">盲&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;僧</a></li>
                            <li><a href="#">圣枪游侠</a></li>
                            <li><a href="#">迅捷斥候</a></li>
                            <li><a href="#">放逐之刃</a></li>
                            <li><a href="#">影流之主</a></li>
                        </ul>
                    </li>
                </ul>
                <form class="navbar-form navbar-right">
                    <div class="form-group has-feedback">
                        <input type="text" class="form-control" placeholder="搜索英雄"/>
                        <span class="glyphicon glyphicon-search form-control-feedback"></span>
                    </div>
                    <button type="button" class="btn btn-info" data-toggle="modal" data-target="#loginPage">登录</button>
                    <button type="button" class="btn btn-default"  data-toggle="modal" data-target="#registerPage">注册</button>
                    <span id="userInformation">admin欢迎回来</span>
                    <button type="button" class="btn btn-warning exit">注销</button>
                    <span class="glyphicon glyphicon-music bgMusic"></span>
                </form>
            </div>
        </div>
        <audio src="../LOLmp3/ThimLife - League of Legends Epic Dubstep(LOL Remix).mp3" autoplay loop></audio>
        <!--登录框-->
        <div class="modal fade" id="loginPage" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span>&times;</span>
                        </button>
                        <h4 class="modal-title text-center">登录League of Legend</h4>
                    </div>
                    <div class="modal-body">
                        <div class="form-group has-feedback">
                            <input type="text" name="username" class="form-control" placeholder="请输入账号"
                                   data-toggle="tooltip" data-placement="bottom" title="用户名不能为空" autofocus>
                            <span class="form-control-feedback glyphicon glyphicon-user"></span>
                        </div>
                        <div class="form-group has-feedback">
                            <input type="password" name="pwd" class="form-control" placeholder="请输入密码"
                                   data-toggle="tooltip" data-placement="bottom" title="密码不能为空">
                            <span class="form-control-feedback glyphicon glyphicon-lock"></span>
                        </div>
                        <p class="text-center">用户名或密码填写有误</p>
                    </div>
                    <div class="modal-footer text-center">

                        <button type="submit" id="loginBtn" class="btn btn-info">登录</button>
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    </div>
                </div>
            </div>
        </div>
        <!--注册框-->
        <div class="modal fade" id="registerPage" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span>&times;</span>
                        </button>
                        <h4 class="modal-title text-center">注册League of Legend</h4>
                    </div>
                    <div class="modal-body">
                        <div class="form-group has-feedback">
                            <input type="text" name="username" class="form-control" placeholder="请输入账号"
                                   data-toggle="tooltip" data-placement="bottom" title="用户名不能为空" autofocus>
                            <span class="form-control-feedback glyphicon glyphicon-user"></span>
                        </div>
                        <div class="form-group has-feedback">
                            <input type="password" name="pwd" class="form-control" placeholder="请输入密码"
                                   data-toggle="tooltip" data-placement="bottom" title="密码不能为空">
                            <span class="form-control-feedback glyphicon glyphicon-lock"></span>
                        </div>
                        <div class="form-group has-feedback">
                            <input type="password" name="pwdCertain" class="form-control" placeholder="再次确认密码"
                                   data-toggle="tooltip" data-placement="bottom" title="两次密码输入不一致">
                            <span class="form-control-feedback glyphicon glyphicon-repeat"></span>
                        </div>
                        <p class="text-center"></p>
                    </div>
                    <div class="modal-footer text-center">
                        <button type="button" id="registerBtn" class="btn btn-info">完成</button>
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    </div>
                </div>
            </div>
        </div>
    </nav>
    <section>
        <div class="container">
            <div class="col-md-12 col-xs-12"><img class="col-xs-4" src="images/title.jpg" alt=""/></div>
            <div class="col-xs-12 row">
                <div class="col-md-2 col-xs-5 middleScreen heroDetail">
                    <div><p>英雄类别</p></div>
                    <div class="row">
                        <button class="btn btn-success floatSky col-xs-5">射手</button>
                        <button class="btn btn-success floatSky col-xs-5">刺客</button>
                    </div>
                    <div><p>皮肤类别</p></div>
                    <div class="skinSort">
                        <img src="images/nonelogo.png" alt=""/>
                        <img src="images/legendlogo.png" alt=""/>
                        <img src="images/epiclogo.png" alt=""/>
                    </div>
                    <a class="btn btn-success col-xs-9" href="Lucian.html" target="_blank"><strong>&gt; 详细资料</strong></a>
                </div>
                <div class="col-md-7 col-xs-12 banner">
                    <div class="out">
                        <div class="image">
                            <img src="images/lucian1.png" alt="" class="img-responsive">
                            <img src="images/lucian2.png" alt="" class="img-responsive"/>
                            <img src="images/lucian3.png" alt="" class="img-responsive"/>
                        </div>
                    </div>
                    <img class="img-responsive leftR" src="images/btn_prev.png" alt=""/>
                    <img class="img-responsive rightR" src="images/btn_next.png" alt=""/>
                </div>
                <div class="col-md-2 col-xs-12 smallScreen heroDetail">
                    <div><p>英雄类别</p></div>
                    <div class="col-xs-12">
                        <button class="btn btn-success floatSky">射手</button>
                        <button class="btn btn-success floatSky">刺客</button>
                    </div>
                    <div><p>皮肤类别</p></div>
                    <div class="skinSort">
                        <img src="images/nonelogo.png" alt=""/>
                        <img src="images/legendlogo.png" alt=""/>
                        <img src="images/epiclogo.png" alt=""/>
                    </div>
                    <a class="btn btn-success col-xs-9" href="Lucian.html" target="_blank"><strong>&gt; 详细资料</strong></a>
                </div>
                <div class="col-md-3 col-xs-12 heroMotto">
                    <img class="img-responsive" src="images/lucian_name.png" alt=""/>
                    <p><i></i><b></b></p>
                    <button type="button" class="btn btn-success col-xs-12 mottoDefault">默认格言</button>
                    <button type="button" class="btn btn-success col-xs-12 myMotto" data-toggle="popover"
                            data-trigger="focus" data-placement="top">我的格言</button>
                    <button type="button" class="btn btn-success col-xs-12 mottoDefine" data-toggle="modal"
                            data-target="#myModal">创建我的格言</button>
                    <audio src="../LOLmp3/1.mp3" class="lucian"></audio>
                    <!--创建我的格言模态框-->
                    <div class="modal fade" id="myModal" tabindex="-1" aria-labelledby="myModalLabel">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                        <span>&times;</span>
                                    </button>
                                    <h4 class="modal-title">DIY我的格言(暂不支持上传语音包)</h4>
                                </div>
                                <div class="modal-body">
                                    <div class="form-group has-feedback">
                                        <input id="inputMotto" type="text" class="form-control" placeholder="输入你的格言...">
                                        <span class="form-control-feedback glyphicon glyphicon-pencil"></span>
                                        <p></p>
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                                    <button type="button" class="btn btn-primary" id="saveMotto">保存格言</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <footer>
        <div class="incomplete"><img src="images/teemo2.png" alt=""/></div>
        <div><img src="images/lucian1.png" alt=""/></div>
    </footer>
    <div class="footerImage">
        <img src="images/footer.jpg" alt=""/>
        <img class="footerLine" src="images/line.png" alt=""/>
        <img class="footerTitle" src="images/footer-story.png" alt=""/>
        <img class="footerStory" src="images/text.png" alt=""/>
    </div>
    <div id="toTop" class="glyphicon glyphicon-menu-up"></div>
<script src="js/jquery-1.11.3.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/index.js"></script>
</body>
</html><!--